<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子文档列表</title>
</head>
<script src="../layui/layui.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>

</style>
<body>
<button ><a href="/document/toInsert">insert</a></button>
<table id="demo" lay-filter="test" ></table>

<span id="span"> </span>
</body>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#demo'
            ,toolbar:true
            ,height: 312
            ,url: '/document/select' //数据接口
            ,page:{limit:2  //(向后台传值，每页显示条数)
                ,limits:[1,2,3] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            } //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '文档编号', width:120, sort: true, fixed: 'left'}
                ,{field: 'title', title: '文档名称', width:200,sort: true}
                ,{field: 'summary', title: '文档摘要', width:400,sort: true}
                ,{field: 'uploaduser', title: '上传人', width:150,sort: true}
                ,{field: 'createdate', title: '上传时间',width:120,sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}
            ]]
        });

        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            console.log(data);
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    location.href = "http://localhost:8080/document/delete?id="+data.id;
                    //向服务端发送删除请求
                    // $.ajax({
                    //     type:"get"
                    //     ,url:"/xuhao/document/delete?id"+data.id
                    //     ,success:function (data) {
                    //         if(data = 'success'){
                    //             $("#span").html("删除成功");
                    //         }else{
                    //             $("#span").html("删除失败");
                    //         }
                    //     }
                    // });
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                location.href = "http://localhost:8080/document/toUpdate?id="+data.id;
            }
        });
        table.resize('demo');
    });


</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>